<template>
    <div class="real-name-authentication-page">
        <!-- 导航栏 -->
        <van-nav-bar title="发布需求" style="background-color: #EB2023;">
            <template #title>
                <span style="color:#fff;font-size:16px;">发布需求</span>
            </template>
        </van-nav-bar>
        <van-form @submit="onSubmit">
            <van-field v-model="form.name" required label="姓名" placeholder="请输入您的姓名"
                :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]" />
            <van-field v-model="form.phone" required label="电话" placeholder="请输入您的电话"
                :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }, { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }]" />
            <van-field readonly clickable name="area" required is-link :value="form.dlqy" label="所在区域"
                placeholder="点击选择省市区" @click="showArea = true" :rules="[{ required: true, message: '请选择区域', trigger: 'blur' }]" />
            <van-field v-model="form.channel" required label="填写渠道" placeholder="请输入填写渠道"
                :rules="[{ required: true, message: '请填写渠道', trigger: 'blur' }]" />
            <van-field v-model="form.zdsl" required label="覆盖终端数" placeholder="请输入终端数"
                :rules="[{ required: true, message: '请输入终端数', trigger: 'blur' }]" />
            <van-field v-model="form.xqms" rows="4" required autosize label="需求描述" type="textarea" maxlength="100"
                placeholder="请填写" show-word-limit :rules="[{ required: true, message: '请填写需求描述', trigger: 'blur' }, { min: 10, max: 100, message: '需求描述长度为10-100个字符' }]" />
            <div style="margin: 16px;">
                <van-button round block type="danger" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>

        <van-popup v-model="showArea" position="bottom">
            <van-area :area-list="areaList" @cancel="showArea = false" @confirm="onConfirmArea" />
        </van-popup>
    </div>
</template>

<script>
import wechat from '@/utils/wechat';
import AreaList from '../../../static/area';
import { addXqinfo } from '../../api/api';
export default {
    data() {
        return {
            showArea:false,
            areaList: AreaList,
            form: {
                name: '',
                phone: '',
                dlqy: '',
                channel: '',
                zdsl: '',
                message: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入电话', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码' }
                ],
                dlqy: [
                    { required: true, message: '请选择所在区域', trigger: 'blur' }
                ],
                channel: [
                    { required: true, message: '请输入渠道', trigger: 'blur' }
                ],
                message: [
                    { required: true, message: '请输入需求描述', trigger: 'blur' },
                    { min: 10, max: 100, message: '需求描述长度为10-100个字符' }
                ]
            }
        };
    },
    created() {
        let openid = localStorage.getItem('openid')
        if (openid) {
            this.openid = openid
        }else{
            this.getWxopenid()
        }
    },
    mounted() {
        
    },
    methods: {
        getWxopenid() {
            let that = this
            wechat.getOpenId().then(data => {
                let code = data.code
                if (code) {
                    try {
                        let param = {
                            code: code,
                        }
                        getAccessToken(param).then(res => {
                            if (res.code == 200) {
                                let access_token = res.data.access_token
                                let openid = res.data.openid
                                that.openid = openid
                                that.accessToken = access_token
                                localStorage.setItem('openid', res.data.openid)
                                localStorage.setItem('accessToken', res.data.access_token)
                                localStorage.setItem('refresh_token', res.data.refresh_token)
                                let data2 = {
                                    openid: openid,
                                    access_token: access_token
                                }
                                getUserInfo(data2).then(res1 => {
                                    if (res1.code == 200) {
                                        data2 = res1.data
                                        that.saveHyinfoByOpenid(data2);
                                    }
                                })
                            }
                        })
                    } catch (error) {
                        console.error('获取失败:', error);
                    }
                }
            })
                .catch(error => {
                    debugger
                    console.error('获取失败:', error)
                })
        },

        // 保存会员信息
        saveHyinfoByOpenid(param) {
            let that = this
            param.wxname = param.nickname
            addHyinfo(param).then(response => {
                if (response.code == 200) {
                    that.hyid = response.data.hyid
                    that.zhye = response.data.zhye
                    localStorage.setItem('wxname', response.data.wxname)
                    localStorage.setItem('zhye', response.data.zhye)
                    localStorage.setItem('hyid', that.hyid)
                } else {
                    debugger
                    console.log('添加失败:', response)
                }
            })
        },
        onConfirmArea(values) {
            this.form.province = values[0].name
            this.form.city = values[1].name
            this.form.county = values[2].name
            const dlqy = values
                .filter((item) => !!item)
                .map((item) => item.name)
                .join('/')
            this.form.dlqy = dlqy
            this.showArea = false
        },
        onSubmit() {
                // 验证不通过，返回 fals
                if(!this.form.name){
                    this.$toast('请输入姓名')
                    return false
                }
                if(!this.form.phone){
                    this.$toast('请输入手机号')
                    return false
                }
                if(!this.form.dlqy){
                    this.$toast('请选择区域')
                    return false
                }
                if(!this.form.channel){
                    this.$toast('请输入渠道')
                    return false
                }
                if(!this.form.zdsl){
                    this.$toast('请输入终端数')
                    return false
                }
                if (!this.form.xqms){
                    this.$toast('请输入需求描述')
                    return false
                }
                this.form.openid = this.openid
                debugger
                // 验证通过，返回 tru
                let param = {
                    name: this.form.name,
                    phone: this.form.phone,
                    dlqy: this.form.dlqy,
                    channel: this.form.channel,
                    zdsl: this.form.zdsl,
                    xqms: this.form.xqms,
                    openid: this.openid,
                }
                addXqinfo(param).then(res => {
                    if (res.code == 200) {
                        this.$toast('提交成功')
                    } else {
                        this.$toast(res.msg)
                    }
                })
        }
    }
};
</script>

<style scoped>
.real-name-authentication-page {
    background-color: #fff;
}

.prompt-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.required {
    color: red;
    margin-right: 5px;
}
</style>